# JS雜食-06--小實作之1

第 12 屆 iThome 鐵人賽

DAY 26

Modern Web

有角拾系列第 26 篇

12th鐵人賽

Rocketgirl

團隊仙人掌技術村

2020-10-11 23:52:04

776 瀏覽

分享至

用HTML+純JS試作一表單，規格：

兩個輸入框
一個提交按鈕
點擊按鈕時顯示：輸入的兩個數字總和

前置作業

新增一資料夾至少包含以下三種檔案：index.html、style.css、main.js與對應資料夾結構中

|-scripts
|----main.js
|-styles
|----style.css
|-index.html

撰寫HTML

輸入框需要包覆在<form></form>之中；依序在<body></body>中填入<form></form>、<input>後，開始給予#id以便js操作，這邊的#id命名為starCalculator。

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
</body>